<template>
    <div class="classlesson">
        <el-form ref="ruleFormRef" :model="classRuleForm" label-width="auto" status-icon>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="专业分类" prop="major_id">
                        <el-select :empty-values="[null, undefined]" v-model="classRuleForm.major_id"
                            placeholder="请选择专业">
                            <el-option v-for="item in majorListData" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="班课名称" prop="name">
                        <el-input v-model.trim="classRuleForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="授课老师" prop="teacher_name">
                        <el-input v-model.trim="classRuleForm.teacher_name" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="创建时间" prop="createTime">
                        <el-date-picker v-model="classRuleForm.createTime" type="daterange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :disabled-date="disableFutureDates"
                            :default-value="[new Date(year, month - 1, 1), new Date()]" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button :icon="Search" type="primary" @click="onSearch">
                            搜索
                        </el-button>
                        <el-button :icon="Refresh" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <div v-if="store.rolesName == '老师组'" class="addClassLesson">
            <el-button @click="addBanClass" :icon="Plus" type="primary" plain>新增</el-button>
        </div>

        <div class='listmain' v-if='classArr.length'>
            <div class='item' v-for='item in classArr' :key='item'>
                <BanListItem @rateSuccess="rateSuccess" @addSuccess='addSuccess' :item='item'></BanListItem>
            </div>

        </div>


        <el-empty style="display: flex; height: 65vh; justify-content: center; align-items: center;" v-else
            description='暂无班课，请新增~~' :image-size='200' />

        <!-- 新增班课弹出层 -->
        <BanDialog v-model:dialogVisible='dialogVisible' title='新增班课'>
            <template #content>
                <div>
                    <AddBanClass :majorListData="majorListData" @addEvent='addEvent' @addSuccess='addSuccess' />
                </div>
            </template>
        </BanDialog>
        <!-- 分页查询 -->
        <div class='pagelist'>
            <el-pagination hide-on-single-page :current-page='classRuleForm.page_num' @current-change='currentChange'
                background layout='prev, pager, next' :total='pageTotal' :page-size='classRuleForm.page_size' />
        </div>

    </div>
</template>

<script setup>
import { ref } from "vue"
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import BanListItem from '@/components/BanListItem/index.vue';
import AddBanClass from '@/components/AddBanClass.vue';
import BanDialog from '@/components/BanDialog.vue';
import { TclassArrData } from '@/api/banke/class';
import { majorList } from "@/api/banji/classadmin.js"
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus';
const store = useUserStore()
const dialogVisible = ref(false)
const majorListData = ref([])
const pageTotal=ref()

const year = ref(new Date().getFullYear())
const month = ref(new Date().getMonth())
// 定义一个方法来计算并返回是否应禁用某日期
const disableFutureDates = (time) => {
    const now = new Date(); // 获取当前时间
    return time && time > now; // 如果time大于当前时间，则返回true，表示该日期应被禁用
};
const { proxy } = getCurrentInstance()
// 班课列表参数
const classRuleForm = ref({
    page_size: 12,
    page_num: 1,
    major_id: "",
    name: "",
    teacher_name: "",
    createTime: ""
})

// 添加屏幕宽度监听
const updatePageSize = () => {
    const width = window.innerWidth
    if (width < 1700 &&width > 1600) {
        classRuleForm.value.page_size = 10
    } else {
        classRuleForm.value.page_size = 12
    }
    // getClassList();
}
// 监听窗口大小变化
onMounted(() => {
    // updatePageSize()
    // window.addEventListener('resize', updatePageSize)
})



//切换页面时候触发时间
const currentChange = (e) => {     
    classRuleForm.value.page_num = e;
    getClassList();
};

// 专业列表
const majorData = () => {
    majorList().then(res => {
        console.log(res);
        majorListData.value = res
        majorListData.value.unshift({ id: "", name: "全部" })
    })
}
// 班课列表
const classArr = ref([])
// 搜索班课参数
// 获取所有班课列表数据
const getClassList = () => {

    if (classRuleForm.value.createTime) {
        let timeArr = []
        classRuleForm.value.createTime.forEach(e => {
            let time = new Date(e).getTime()
            e = time
            timeArr.push(e)
        })
        classRuleForm.value.createTime = timeArr
    }
    let options = {
        page_size: classRuleForm.value.page_size,
        page_num: classRuleForm.value.page_num,
        name: classRuleForm.value.name ? classRuleForm.value.name : null,
        start_time: classRuleForm.value.createTime ? classRuleForm.value.createTime[0].toString() : null,
        end_time: classRuleForm.value.createTime ? classRuleForm.value.createTime[1].toString() : null,
        marjor_id: classRuleForm.value.major_id ? classRuleForm.value.major_id : null,
        teacher_name: classRuleForm.value.teacher_name ? classRuleForm.value.teacher_name : null,
        is_material:false,
        only_for_me:true
    }

    TclassArrData(options).then(res => {        
        pageTotal.value=res.total_count
        if (res.list) {
            classArr.value = res.list    
            return
        }
        ElMessage.error("找不到该班课")

    })
}




// 搜索班课
const onSearch = () => {
    classRuleForm.value.page_num= 1;
    getClassList()
}

// 重置表单
const resetForm = () => {
    proxy.$refs.ruleFormRef.resetFields();
    getClassList()
}


// 新增班课
const addBanClass = () => {
    dialogVisible.value = true;
}

// 新增班课成功之后的回调
const addSuccess = () => {
    dialogVisible.value = false
    getClassList()

}


// 子组件点击取消返回的事件
const addEvent = () => {
    dialogVisible.value = false

};

// 评分和拷贝成功的函数
const rateSuccess = () => {
    getClassList()
}

majorData()
getClassList()

</script>

<style lang="scss" scoped>
.classlesson {
    margin-top: 30px;
    min-width: 1200px;

    .el-form-item {
        margin-right: 15px;
    }
}

.listmain {
    padding: 25px;
    padding-top: 20px;
    display: grid;
    grid-gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    .item {
        display: inline-block;
        background: transparent;
        border-radius: 9px;
        position: relative;
        padding: 6px 6px 0 6px;
        transition: 0.3s;
    }

    .item:hover {
        background: #EFEFEF;
    }

}
</style>